<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div>
    <div class="abstatic-height"></div>
    <div class="app-container calendar-list-container">
      <div class="filter-container">
        <el-button-group>
          <el-button
            type="primary"
            v-if="menuManager_btn_add"
            icon="plus"
            @click="handlerAdd"
            size="mini"
          >添加</el-button>
          <el-button
            type="primary"
            v-if="menuManager_btn_edit"
            icon="edit"
            @click="handlerEdit"
            size="mini"
          >编辑</el-button>
          <el-button
            type="primary"
            v-if="menuManager_btn_del"
            icon="delete"
            @click="handleDelete"
            size="mini"
          >删除</el-button>
        </el-button-group>
      </div>

      <el-row>
        <el-col :span="7" style="margin-top:15px;margin-right:10px">
          <!-- <el-card class="box-card"> -->
          <border-warp widthAuto>
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
            <el-tree
              class="filter-tree"
              :data="treeData"
              node-key="id"
              highlight-current
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="menuTree"
              @node-click="getNodeData"
              default-expand-all
            ></el-tree>
          <!-- </el-card> -->
          </border-warp>
        </el-col>
        <el-col :span="16" style="margin-top:15px;">
          <!-- <el-card class="box-card"> -->
          <border-warp widthAuto>
            <el-form
              :label-position="labelPosition"
              label-width="80px"
              :model="form"
              ref="form"
              @submit.native.prevent
            >
              <el-form-item label="路径编码" prop="code">
                <el-input v-model.trim="form.code" :disabled="formEdit" placeholder="请输入路径编码"></el-input>
              </el-form-item>
              <el-form-item label="标题" prop="title">
                <el-input v-model.trim="form.title" :disabled="formEdit" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item label="父级节点" prop="parentId">
                <el-input
                  v-model.trim="form.parentId"
                  :disabled="formEdit"
                  placeholder="请输入父级节点"
                  readonly
                ></el-input>
              </el-form-item>
              <el-form-item label="图标" prop="icon">
                <el-input v-model.trim="form.icon" :disabled="formEdit" placeholder="请输入图标"></el-input>
              </el-form-item>
              <el-form-item label="资源路径" prop="href">
                <el-input v-model.trim="form.href" :disabled="formEdit" placeholder="请输入资源路径"></el-input>
              </el-form-item>
              <el-form-item label="类型" prop="type">
                <el-select
                  class="filter-item"
                  v-model="form.type"
                  :disabled="formEdit"
                  placeholder="请输入资源请求类型"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.id"
                    :label="item.labelDefault"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所属系统" prop="type">
                <el-select class="filter-item" v-model="form.attr2" :disabled="formEdit">
                  <el-option
                    v-for="item in belongsys"
                    :key="item.id"
                    :label="item.channelName"
                    :value="item.id+''"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否为超级管理员菜单" prop="orderNum">
                <el-select class="filter-item" v-model="form.attr3" :disabled="formEdit">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否为分站菜单" prop="orderNum">
                <el-select class="filter-item" v-model="form.attr4" :disabled="formEdit">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序" prop="orderNum">
                <el-input v-model.trim="form.orderNum" :disabled="formEdit" placeholder="请输入排序"></el-input>
              </el-form-item>
              <el-form-item label="描述" prop="description">
                <el-input v-model.trim="form.description" :disabled="formEdit" placeholder="请输入描述"></el-input>
              </el-form-item>
              <el-form-item label="前端组件" prop="attr1">
                <el-input v-model.trim="form.attr1" :disabled="formEdit" placeholder="请输入描述"></el-input>
              </el-form-item>
              <el-form-item v-if="formStatus == 'update'">
                <el-button type="primary" @click="update" size="mini" native-type="submit">更新</el-button>
                <el-button @click="onCancel" size="mini" type="text">取消</el-button>
              </el-form-item>
              <el-form-item v-if="formStatus == 'create'">
                <el-button type="primary" @click="create" size="mini" native-type="submit">保存</el-button>
                <el-button @click="onCancel" size="mini" type="text">取消</el-button>
              </el-form-item>
            </el-form>
          <!-- </el-card> -->
          </border-warp>
          <div style="height: 15px;"></div>
          <!-- <el-card class="box-card" style="margin-top:15px;"> -->
          <border-warp widthAuto>
            <title-bar title="按钮或资源"></title-bar>
            <!-- <span style="color: #2bdef5">按钮或资源</span> -->

            <menu-element :menuId="currentId" ref="menuElement"></menu-element>
          <!-- </el-card> -->
          </border-warp>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  fetchTree,
  getObj,
  addObj,
  delObj,
  putObj,
  getAllSys
} from "@/api/admin/menu/index";
import { mapGetters } from "vuex";
// import { getTypeValue } from '@/api/dict/dictValue/index';
export default {
  components: {
    "menu-element": () => import("./components/menuElement")
  },
  data() {
    return {
      filterText: "",
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: "",
      showElement: false,
      typeOptions: [
        {
          id: "menu",
          labelDefault: "菜单",
          value: "menu"
        },
        {
          id: "dirt",
          labelDefault: "目录",
          value: "dirt"
        }
      ],
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "title"
      },
      labelPosition: "right",
      form: {
        code: undefined,
        title: undefined,
        parentId: undefined,
        href: undefined,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: undefined,
        enabled: undefined,
        attr1: undefined,
        attr2: undefined,
        type: "authority_menu_menu"
      },
      currentId: -1,
      menuManager_btn_add: true,
      menuManager_btn_edit: true,
      menuManager_btn_del: true,
      belongsys: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getallSys();

    // 菜单权限 暂时不限制
    // this.menuManager_btn_add = this.elements['menuManager:btn_add'];
    // this.menuManager_btn_del = this.elements['menuManager:btn_del'];
    // this.menuManager_btn_edit = this.elements['menuManager:btn_edit'];
    // getTypeValue('authority_menu').then(response => {
    //   this.typeOptions = response.data.rows;
    // });
  },
  computed: {
    ...mapGetters(["elements"])
  },
  methods: {
    getallSys() {
      getAllSys().then(res => {
        this.belongsys = res;
      });
    },
    getList() {
      fetchTree(this.listQuery).then(data => {
        this.treeData = data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getNodeData(data) {
      if (!this.formEdit) {
        this.formStatus = "update";
      }
      getObj(data.id).then(response => {
        this.form = response.data;
      });
      this.currentId = data.id;
      this.showElement = true;
      this.$refs.menuElement.menuId = data.id;
      this.$refs.menuElement.getList();
    },
    handlerEdit() {
      if (this.form.id) {
        this.formEdit = false;
        this.formStatus = "update";
      }
    },
    handlerAdd() {
      this.resetForm();
      this.formEdit = false;
      this.formStatus = "create";
    },
    handleDelete() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.getList();
          this.resetForm();
          this.onCancel();
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
        });
      });
    },
    update() {
      putObj(this.form.id, this.form).then(() => {
        this.getList();
        this.$notify({
          title: "成功",
          message: "更新成功",
          type: "success",
          duration: 2000
        });
      });
    },
    create() {
      addObj(this.form).then(() => {
        this.getList();
        this.$notify({
          title: "成功",
          message: "创建成功",
          type: "success",
          duration: 2000
        });
      });
    },
    onCancel() {
      this.formEdit = true;
      this.formStatus = "";
    },
    resetForm() {
      this.form = {
        code: undefined,
        title: undefined,
        parentId: this.currentId,
        href: undefined,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: undefined,
        enabled: undefined
      };
    }
  }
};
</script>
<style>
.box-card {
  border-color: #00f9ff;
}
</style>

